<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="1300"
    @close="close"
  >
    <el-table v-loading="listLoading" :data="isJiFenList">
      <el-table-column
        align="center"
        label="积分ID"
        prop="JifenID"
        show-overflow-tooltip
        width="100px"
      />
      <el-table-column label="积分加减" width="100">
        <template #default="{ row }">
          <div v-if="row.JifenType == 1">增加积分</div>
          <div v-if="row.JifenType == -1">扣减积分</div>
        </template>
      </el-table-column>
      <el-table-column label="积分类型" width="100">
        <template #default="{ row }">
          <div v-if="row.JifenClass == 0">未知</div>
          <div v-if="row.JifenClass == 1">转介绍客户</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="积分说明"
        prop="JifenMemo"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="积分数"
        prop="JifenNum"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="操作人"
        prop="ActStaff"
        show-overflow-tooltip
      />
      <el-table-column v-if="actstaffpostid == 6" label="操作" width="100">
        <template #default="{ row }">
          <el-button @click="integrationEdit(row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    /> -->

    <div style="padding: 15px; height: 80px">
      <div style="float: left; padding: 10px">
        <el-form ref="formRef" :rules="rules" :model="integrationForm">
          <el-space>
            <el-form-item label="积分加减" prop="JifenType">
              <el-select
                v-model="integrationForm.JifenType"
                style="width: 130px"
              >
                <el-option
                  v-for="(item, index) in nature"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="积分类型" prop="JifenClass">
              <el-select
                v-model="integrationForm.JifenClass"
                style="width: 130px"
              >
                <el-option :value="0" label="未知" />
                <el-option :value="1" label="转介绍客户" />
              </el-select>
            </el-form-item>
            <el-form-item label="积分说明" prop="JifenMemo">
              <el-input
                v-model="integrationForm.JifenMemo"
                placeholder="积分说明"
              />
            </el-form-item>
            <el-form-item label="积分分值" prop="JifenNum">
              <el-input
                v-model="integrationForm.JifenNum"
                type="number"
                placeholder="分值"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryData">
                {{ editTitle ? '确认修改' : '确认添加' }}
              </el-button>
              <el-button v-if="editTitle" type="warning" @click="cancelEdit">
                取消修改
              </el-button>
            </el-form-item>
          </el-space>
        </el-form>
      </div>
      <div style="float: right; padding: 10px">
        当前积分余额：
        <span
          v-if="total > 0"
          style="color: green; cursor: pointer"
          @click="toPointsList(row)"
        >
          {{ total }}
        </span>
        <span
          v-else-if="total < 0"
          style="color: red; cursor: pointer"
          @click="toPointsList(row)"
        >
          {{ total }}
        </span>
        <span v-else style="cursor: pointer" @click="toPointsList(row)">
          {{ total }}
        </span>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import { doEdit, JifenList } from '@/api/customerJifen'

  export default defineComponent({
    name: 'CustomerJifenEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        isJiFenList: [],
        formRef: null,
        jifenlist: [],
        nature: [
          {
            value: 1,
            label: '增加积分',
          },
          {
            value: -1,
            label: '扣减积分',
          },
        ],
        editTitle: false,
        integrationForm: {},
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          title: '',
        },
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        form: {
          roles: [],
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        title: '',
        dialogFormVisible: false,
        actstaffpostid: 0,
      })

      const showEdit = (row) => {
        const userInfo = JSON.parse(localStorage.getItem('userInfo'))
        const actstaffpost = JSON.parse(userInfo.StaffPostID)
        const actstaffpostid = actstaffpost[0][1]

        state.actstaffpostid = actstaffpostid

        state.form = Object.assign({}, row)
        state.title = row.CustomerAllName
        state.integrationForm.CustomerID = row.CustomerID
        if (!row.JifenID) {
          state.editTitle = false
          state.integrationForm.JifenID = 0
        } else {
          state.editTitle = true
        }

        getJifenList()
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {
          roles: [],
        }
        ;(state.queryForm = {
          pageNo: 1,
          pageSize: 10,
          title: '',
        }),
          (state.dialogFormVisible = false)
      }
      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        getJifenList()
      }
      // 修改积分
      const integrationEdit = (row) => {
        state.integrationForm = Object.assign({}, row)
        if (row.JifenID) {
          state.editTitle = true
        } else {
          state.editTitle = false
        }
        console.log(row, '修改')
      }
      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
        getJifenList()
      }
      // 添加积分提交
      const queryData = async () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await doEdit(state.integrationForm)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            getJifenList()
            cancelEdit()
          }
        })
      }
      const getJifenList = async () => {
        const dataMsg = {
          CustomerID: state.integrationForm.CustomerID,
        }
        const {
          data: { list, total },
        } = await JifenList(dataMsg)
        state.total = total
        state.isJiFenList = list
        state.listLoading = false
        console.log(list, 'datadata')
      }
      // 取消修改
      const cancelEdit = () => {
        const CustomerID = state.integrationForm.CustomerID
        state.integrationForm = {}
        state.integrationForm.CustomerID = CustomerID
        state.editTitle = false
        state.integrationForm.JifenID = 0
        console.log(state.integrationForm, ' state.integrationForm')
      }
      return {
        ...toRefs(state),
        showEdit,
        cancelEdit,
        handleSizeChange,
        queryData,
        integrationEdit,
        getJifenList,
        handleCurrentChange,
        close,
      }
    },
  })
</script>
